<template>
	<div class="container box">
		<!-- 查询表单 -->
		<div class="search_form" ref="search_form">
			<div>
				<el-input v-model="searchForm.menuName" size="mini" placeholder="请输入菜单名称" clearable></el-input>
				<el-select v-model="searchForm.state" size="mini" placeholder="请选择菜单状态" class="second_label" clearable>
					<el-option label="显示" value="0"></el-option>
					<el-option label="隐藏" value="1"></el-option>
					<el-option label="全部" value="2"></el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="searchMenuForm">查询</el-button>
			</div>
      <el-button v-hasPermi="['basicDataSubsystem:menumanage:menuInsert']" size="mini" type="primary" icon="el-icon-plus" @click="addMenu">新建</el-button>
		</div>
		<div ref="tableCot" style="height: 100%">
			<el-table
					ref="myTable"
					:data="tableData"
					style="width: 100%"
					border
					row-key="id"
					:height="tableHeight"
					highlight-current-row
					stripe
					:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
					lazy
					:load="getChildren"
			>
				<el-table-column prop="menuName" label="菜单名称" sortable width="240"></el-table-column>

				<el-table-column prop="url" label="请求地址" minWidth="200"></el-table-column>
				<el-table-column prop="openType" label="打开方式" width="100">
					<template slot-scope="scope">
						<p v-show="scope.row.openType == 0">内部打开</p>
						<p style="color: #ccc" v-show="scope.row.openType == 1">外部打开</p>
					</template>
				</el-table-column>
<!--				<el-table-column prop="systemName" label="所属系统" width="200"></el-table-column>-->
				<el-table-column prop="visible" label="可见" width="80">
					<template slot-scope="scope">
						<p v-show="scope.row.visible == 0">显示</p>
						<p style="color: #ccc" v-show="scope.row.visible == 1">隐藏</p>
					</template>
				</el-table-column>
				<el-table-column prop="menuCode" label="权限标识" width="300"></el-table-column>
				<el-table-column prop="menuType" label="菜单类型" width="80">
					<template slot-scope="scope">
						<el-tag size="mini" v-if="scope.row.menuType == '01'">目录</el-tag>
						<el-tag size="mini" type="success" v-show="scope.row.menuType == '02'">菜单</el-tag>
						<el-tag size="mini" type="warning" v-show="scope.row.menuType == '03'">按钮</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="sortNum" label="排序" sortable width="80"></el-table-column>
				<el-table-column label="操作" width="450" fixed="right">
					<template slot-scope="scope">
						<el-button
								v-if="scope.row.parentId != '0' && menuArr.includes('菜单管理角色成员按钮')"
								class="editBtn"
								size="mini"
								@click="handleRoleGroupClick(scope.row)"
						>
							<span style="color: #efae12">
								<i class="iconfont icon-1-05"></i>
								<span style="padding-left: 5px">角色成员</span>
							</span>
						</el-button>
						<span v-hasPermi="['basicDataSubsystem:menumanage:menuInsert']">
							<el-button @click="sortHandleClick(scope.row)" v-if="scope.row.menuType == '02'" class="editBtn" size="mini">
								<span><span style="padding-left: 5px; color: #0b6cd6">配置列</span></span>
							</el-button>
							<el-button v-if="scope.row.menuType == '02'" class="editBtn" size="mini" @click="handeleBtnClick(scope.row)">
								<!-- <i class="iconfont icon-liebiaotubiao_liebiaoxinzeng" style="color:#41B035"></i>新建 -->
								<span style="color: #36ba2b">
									<i class="iconfont icon-1-06"></i>
									<span style="padding-left: 5px">新建</span>
								</span>
							</el-button>

							<el-button v-else-if="scope.row.menuType == '03'" class="editBtn" disabled size="mini" style="color: #ccc">
								<!-- <i class="iconfont icon-liebiaotubiao_liebiaoxinzeng" style="color:#ccc"></i>新建 -->
								<span style="color: #36ba2b">
									<i class="iconfont icon-1-06"></i>
									<span style="padding-left: 5px">新建</span>
								</span>
							</el-button>
							<el-button size="mini" @click="addMenu(scope.row)" class="editBtn" v-else>
								<!-- <i class="iconfont icon-liebiaotubiao_liebiaoxinzeng" style="color:#41B035"></i>新建 -->
								<span style="color: #36ba2b">
									<i class="iconfont icon-1-06"></i>
									<span style="padding-left: 5px">新建</span>
								</span>
							</el-button>
						</span>

						<!-- 按钮编辑 -->
						<span v-hasPermi="['basicDataSubsystem:menumanage:menuUpdate']">
							<el-button size="mini" @click="handleBtnEdit(scope.row)" v-if="scope.row.menuType == '03'" class="editBtn">
								<!-- <i class="iconfont icon-liebiaotubiao_liebiaobianji" style="color:#2166B2"></i>编辑 -->
								<span style="color: #0b6cd6">
									<i class="iconfont icon-1-07"></i>
									<span style="padding-left: 5px">编辑</span>
								</span>
							</el-button>

							<!-- 菜单编辑 -->
							<el-button size="mini" @click="handleEdit(scope.row, scope.row.id)" v-else class="editBtn">
								<!-- <i class="iconfont icon-liebiaotubiao_liebiaobianji" style="color:#2166B2"></i>编辑 -->
								<span style="color: #0b6cd6">
									<i class="iconfont icon-1-07"></i>
									<span style="padding-left: 5px">编辑</span>
								</span>
							</el-button>
						</span>

						<el-button
                v-hasPermi="['basicDataSubsystem:menumanage:menuDelete']"
								size="mini"
								type
								slot="reference"
								class="deleteBtn"
								@click="handleDelete(scope.row.menuType, scope.row.id, scope.row)"
						>
							<!-- <i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i>删除 -->
							<span style="color: #f75e5e">
								<i class="iconfont icon-1-08"></i>
								<span style="padding-left: 5px">删除</span>
							</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 角色成员 -->
		<el-drawer title="角色成员" :visible.sync="roleGrounpVisible" size="30%" :before-close="handleClose">
			<div class="search_input">
				<el-input
						placeholder="搜索角色名称"
						v-model="roleGrounpKey"
						style="width: 150px; margin-right: 16px"
						size="mini"
						clearable
				></el-input>
				<el-button class="btn_search" size="mini" type="primary" icon="el-icon-search" @click="searchRoleName">查询</el-button>
			</div>

			<BaseTable
					:data="roleData"
					:columns="roleDataColumns"
					:tableHeight="tableHeight"
					:pagination="false"
					:loading="loading"
			></BaseTable>
			<div class="demo-drawer__footer">
				<el-pagination
						background
						layout="total, sizes, prev, pager, next, jumper"
						:total="roleGrounpPagination.total"
						:current-page="roleGrounpPagination.currentPage"
						:page-size="roleGrounpPagination.pageSize"
						:page-sizes="[10, 15, 30, 50]"
						@size-change="roleGrounpPaginationSizeChange"
						@current-change="roleGrounpPaginationCurrentChange"
				></el-pagination>
			</div>
		</el-drawer>
		<!-- 添加添加父菜单数据列表对话框 -->
		<el-drawer title="添加菜单" :visible.sync="addFormDrawer" :direction="direction" :before-close="handleClose" size="30%">
			<el-form :model="addFform" :rules="addFformRules" ref="ruleAddFform" label-width="100px" style="padding: 20px">
<!--				<el-form-item label="所属系统：" prop="systemCode">-->
<!--					<el-select v-model="addFform.systemCode" placeholder="请选择所属系统" style="width: 100%" @change="changeAddSystemCode">-->
<!--						<el-option-->
<!--								:label="item.systemName"-->
<!--								:value="item.systemCode"-->
<!--								v-for="item in listproject"-->
<!--								:key="item.systemCode"-->
<!--						></el-option>-->
<!--					</el-select>-->
<!--				</el-form-item>-->
<!--				<el-form-item label="上级菜单" prop="parentId">-->
<!--					<el-select v-model="addFform.parentId" placeholder="请选择上级菜单" style="width: 100%">-->
<!--						<el-option v-for="item in parentMenu" :key="item.menuId" :label="item.menuName" :value="item.menuId"></el-option>-->
<!--					</el-select>-->
<!--				</el-form-item>-->
				<el-form-item label="菜单类型：" prop="menuType">
					<el-select v-model="addFform.menuType" placeholder="请选择菜单类型" style="width: 100%" @change="changeMenuType">
						<el-option label="目录" value="01"></el-option>
						<el-option label="菜单" value="02"></el-option>
						<el-option label="按钮" value="03"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="菜单名称：" prop="menuName">
					<el-input v-model="addFform.menuName"></el-input>
				</el-form-item>
				<el-form-item label="请求地址：" prop="url">
					<el-input v-model="addFform.url"></el-input>
				</el-form-item>

				<el-form-item label="打开方式" prop="openType">
					<el-select v-model="addFform.openType" placeholder="请选择打开方式" style="width: 100%">
						<el-option label="内部打开" value="0"></el-option>
						<el-option label="外部打开" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="权限标识" prop="menuCode">
					<el-input v-model="addFform.menuCode"></el-input>
				</el-form-item>
				<el-form-item label="显示排序" prop="sortNum">
					<el-input v-model="addFform.sortNum" @input="addFform.sortNum = verifyfilter('number', addFform.sortNum)"></el-input>
				</el-form-item>
				<el-form-item label="图标">
					<el-select v-model="addFform.icon" placeholder="请选择图标" style="width: 100%">
						<el-option :label="item.name" :value="item.icon" v-for="item in icon" :key="item.icon">
							{{ item.name }}：
							<i :class="'iconfont ' + item.icon"></i>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="菜单状态" prop="visible">
					<el-radio-group v-model="addFform.visible">
						<el-radio label="0">显示</el-radio>
						<el-radio label="1">隐藏</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="系统类型" prop="systemType">
					<el-radio-group v-model="addFform.systemType" @change="addFormImg">
						<el-radio label="0">PC</el-radio>
						<el-radio label="1">APP</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="图片地址：" prop="appImg" v-if="flag_am">
					<el-input v-model="addFform.appImg"></el-input>
				</el-form-item>
				<!-- 如何选择按钮保存事件 -->
				<div class="demo-drawer__footer" v-if="flagAddBtn">
					<el-button size="mini">保存并添加</el-button>
					<el-button type="primary" @click="addBtnSubmit()" size="mini">保存按钮</el-button>
				</div>
				<div class="demo-drawer__footer" v-else>
					<el-button size="mini" @click="saveSubmit">保存并添加</el-button>
					<el-button type="primary" @click="submitFform()" size="mini">保存</el-button>
				</div>
			</el-form>
		</el-drawer>

		<!-- 编辑用户对话框 -->
		<el-drawer title="编辑菜单" :visible.sync="drawer" :direction="direction" size="30%" :before-close="handleClose">
			<!-- 编辑内容 -->
			<el-row>
				<el-col style="padding: 0 20px">
					<el-form ref="form" :model="editForm" :rules="addFformRules" label-width="100px">
<!--						<el-form-item label="所属系统" prop="systemCode">-->
<!--							<el-select-->
<!--									v-model="editForm.systemCode"-->
<!--									placeholder="请选择所属系统"-->
<!--									style="width: 100%"-->
<!--									@change="changeEditSystemCode"-->
<!--							>-->
<!--								<el-option-->
<!--										:label="item.systemName"-->
<!--										:value="item.systemCode"-->
<!--										v-for="item in listproject"-->
<!--										:key="item.systemCode"-->
<!--								></el-option>-->
<!--							</el-select>-->
<!--						</el-form-item>-->
						<el-form-item label="上级菜单" prop="parentId">
							<el-select v-model="editForm.parentId" placeholder="请选择上级菜单" style="width: 100%">
								<el-option
										v-for="item in parentMenu"
										:key="item.menuId"
										:label="item.menuName"
										:value="item.menuId"
								></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="菜单类型" prop="menuType">
							<el-select
									v-model="editForm.menuType"
									placeholder="请选择菜单类型"
									style="width: 100%"
									@change="changeMenuType"
							>
								<template v-if="flagMenu">
									<el-option label="目录" value="01"></el-option>
									<el-option label="菜单" value="02"></el-option>
								</template>

								<template v-if="flagCatalogue">
									<el-option label="菜单" value="02"></el-option>
								</template>

								<template v-else>
									<el-option label="目录" value="01"></el-option>
								</template>
							</el-select>
						</el-form-item>

						<el-form-item label="菜单名称" prop="menuName">
							<el-input v-model="editForm.menuName"></el-input>
						</el-form-item>
						<el-form-item label="请求地址" prop="url">
							<el-input v-model="editForm.url"></el-input>
						</el-form-item>
						<el-form-item label="打开方式" prop="openType">
							<el-select v-model="editForm.openType" placeholder="请选择打开方式" style="width: 100%">
								<el-option label="内部打开" value="0"></el-option>
								<el-option label="外部打开" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="权限标识" prop="menuCode">
							<el-input v-model="editForm.menuCode"></el-input>
						</el-form-item>
						<el-form-item label="显示排序" prop="sortNum">
							<el-input
									v-model="editForm.sortNum"
									@input="editForm.sortNum = verifyfilter('number', editForm.sortNum)"
							></el-input>
						</el-form-item>
						<el-form-item label="图标">
							<el-select v-model="editForm.icon" placeholder="请选择图标" style="width: 100%">
								<el-option :label="item.name" :value="item.icon" v-for="item in icon" :key="item.icon">
									{{ item.name }}：
									<i :class="'iconfont ' + item.icon"></i>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="菜单状态" prop="visible">
							<el-radio-group v-model="editForm.visible">
								<el-radio label="0">显示</el-radio>
								<el-radio label="1">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="系统类型" prop="systemType" >
							<el-radio-group v-model="editForm.systemType" @change="editFormImg">
								<el-radio label="0">PC</el-radio>
								<el-radio label="1">APP</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="图片地址：" prop="appImg" v-if="flag_am">
							<el-input v-model="editForm.appImg"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<!-- drawer 底部 -->

			<!-- 菜单目录保存事件 -->
			<div class="demo-drawer__footer">
				<!-- <el-button size="mini" @click="saveAdddMenu">保存并添加</el-button> -->
				<el-button type="primary" @click="editFormSubmit()" size="mini">保存</el-button>
			</div>
		</el-drawer>

		<!-- 添加按钮 -->
		<el-drawer title="添加按钮" :visible.sync="btnDrawer" :direction="direction" size="30%">
			<el-form
					ref="btnFormRef"
					:model="btnForm"
					label-width="80px"
					style="padding: 0 20px"
					:rules="addBtnRules"
					:before-close="handleClose"
			>
				<el-form-item label="按钮名称" prop="resourceName">
					<el-input v-model="btnForm.resourceName"></el-input>
				</el-form-item>
				<el-form-item label="权限标识" prop="resourceCode">
					<el-input v-model="btnForm.resourceCode"></el-input>
				</el-form-item>
				<el-form-item label="显示排序" prop="sortNum">
					<el-input v-model="btnForm.sortNum" @input="btnForm.sortNum = verifyfilter('number', btnForm.sortNum)"></el-input>
				</el-form-item>
				<el-form-item label="菜单状态" prop="visible">
					<el-radio-group v-model="btnForm.visible">
						<el-radio label="0">显示</el-radio>
						<el-radio label="1">隐藏</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
				<!-- <el-button size="mini">保存并添加</el-button> -->
				<el-button type="primary" @click="btnFormSubmit()" size="mini">保存</el-button>
			</div>
		</el-drawer>
		<!-- 编辑按钮 -->
		<el-drawer title="编辑按钮" :visible.sync="editBtnDrawer" :direction="direction" size="30%">
			<el-form
					ref="btnFormRef"
					:model="editBtnForm"
					label-width="80px"
					style="padding: 0 20px"
					:rules="addBtnRules"
					:before-close="handleClose"
			>
				<el-form-item label="按钮名称" prop="resourceName">
					<el-input v-model="editBtnForm.resourceName"></el-input>
				</el-form-item>
				<el-form-item label="权限标识" prop="resourceCode">
					<el-input v-model="editBtnForm.resourceCode"></el-input>
				</el-form-item>
				<el-form-item label="显示排序" prop="sortNum">
					<el-input
							v-model="editBtnForm.sortNum"
							@input="editBtnForm.sortNum = verifyfilter('number', editBtnForm.sortNum)"
					></el-input>
				</el-form-item>
				<el-form-item label="菜单状态" prop="visible">
					<el-radio-group v-model="editBtnForm.visible">
						<el-radio label="0">显示</el-radio>
						<el-radio label="1">隐藏</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
				<el-button type="primary" @click="btnEditFormSubmit()" size="mini">保存</el-button>
			</div>
		</el-drawer>
		<!-- 配置列弹窗 -->
		<el-drawer :visible.sync="isShowSort" size="65%" class="fontSize24" :destroy-on-close="true" custom-class="isShowSort">
			<div slot="title" class="sortTitle">
				<span>{{ showColumnName + "菜单配置列信息" }}</span>
				<div class="btnSort" style="float: right">
					<el-tooltip class="item" content="新建" placement="top">
						<el-button icon="icon-tianjia iconfont" size="mini" @click="getAddColumn"></el-button>
					</el-tooltip>
					<el-tooltip class="item" content="编辑" placement="top">
						<el-button icon="iconfont icon-bianji" size="mini" @click="getEditColumn"></el-button>
					</el-tooltip>
					<el-tooltip class="item" content="删除" placement="top">
						<el-button icon="iconfont icon-shanchu" size="mini" @click="getDeleteColumn"></el-button>
					</el-tooltip>
				</div>
			</div>
			<div class="drawerTable">
				<BaseTable
						@details="getSelectListTable"
						class="drawerTableChild"
						:data="columnTableData"
						:columns="columnsList"
						:tableHeight="tableHeightColumn"
						:pagination="queryallColumn"
						@size-change="sizeChangeColumn"
						@current-change="pageChangeColumn"
						:loading="loadingColumn"
				></BaseTable>
			</div>
		</el-drawer>
		<el-drawer
				:title="typeColumn == 0 ? '新建列信息' : '编辑列信息'"
				:visible.sync="drawerColumn"
				custom-class="drawerColumn"
				:modal-append-to-body="false"
				:append-to-body="true"
				size="30%"
		>
			<el-form :model="ruleFormColumn" :rules="rulesColumn" ref="ruleForm" label-width="100px">
				<el-form-item label="中文列名" prop="columnLable">
					<el-input class="others" v-model="ruleFormColumn.columnLable" style="width: 90% !important"></el-input>
					<!-- <el-input class="others" v-model="ruleFormColumn.columnLable" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" style="width: 90% !important"></el-input> -->
				</el-form-item>
				<el-form-item label="英文列名" prop="columnNameEn">
					<el-input class="others" v-model="ruleFormColumn.columnNameEn" style="width: 90% !important"></el-input>
					<!-- <el-input class="others" v-model="ruleFormColumn.columnNameEn" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')" style="width: 90% !important"></el-input> -->
				</el-form-item>
				<el-form-item label="宽度" prop="columnWidth">
					<el-select
							v-model="ruleFormColumn.columnWidth"
							placeholder="请选择列宽"
							class="others"
							style="width: 90% !important; margin-right: 0.7em"
					>
						<el-option v-for="item in widthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<!-- <el-input class="others" v-model="ruleFormColumn.columnWidth" style="width: 90% !important;margin-right:0.7em;"></el-input> -->
					<!-- <el-input class="others" v-model="ruleFormColumn.columnWidth" onkeyup = "value=value.replace(/[^\d]/g,'') > 300 ? 300 : value.replace(/[^\d]/g,'')"  min="0" max="300" oninput="if(value.length>3)value=value.slice(0,3)" style="width: 90% !important;margin-right:0.7em;"></el-input> -->
					<span class="unit">px</span>
				</el-form-item>
				<el-form-item label="是否显示" prop="columnHide">
					<el-checkbox
							v-model="ruleFormColumn.columnHide"
							true-label="0"
							false-label="1"
							@click.native.prevent="checkedChange(ruleFormColumn.columnHide)"
					></el-checkbox>
				</el-form-item>
				<el-form-item label="是否排序" prop="columnSort">
					<el-radio
							v-model="ruleFormColumn.columnSort"
							:disabled="radioDisabled"
							label="1"
							@click.native.prevent="radioChange(ruleFormColumn.columnSort)"
					>
						{{ hiddenValue }}
					</el-radio>
				</el-form-item>
				<el-form-item label="列名排序号" prop="columnSortNum">
					<el-input class="others" v-model="ruleFormColumn.columnSortNum" style="width: 90% !important"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	import BaseTable from '@/components/BaseTable'
	import Utils from '@/libs/Utils.js'

	export default {
	  components: { BaseTable },
	  data() {
	    return {
	      oldValA: {},
	      oldValB: {},
	      oldValC: {},
	      oldValD: {},
	      openId: '',
	      deptList: [],
	      tableList: [],
	      lazyTreeNodeMap: new Map(),
	      Height: 300,
	      listproject: [], // 所属系统
	      parentMenu: [], // 上级菜单
	      roleGrounpPagination: {
	        currentPage: 1,
	        pageSize: 10,
	        total: 0
	      },
	      roleGrounpVisible: false,
	      roleGrounpId: '',
	      loading: false,
	      roleGrounpKey: '',
	      roleData: [],
	      roleDataColumns: [
	        { prop: 'roleName', label: '角色名称' },
	        { prop: 'roleCode', label: '角色编码' }
	      ],
	      icon: [
	        {
	          name: '基础数据管理',
	          icon: 'icon-yuanshujuguanli'
	        },
	        {
	          name: '商务业务管理',
	          icon: 'icon-shangwuxitong'
	        },
	        {
	          name: '服务大厅',
	          icon: 'icon-yizhanshifuwudating'
	        },
	        {
	          name: '信息查询',
	          icon: 'icon-icon-08'
	        },
	        {
	          name: '首页',
	          icon: 'icon-icon-11'
	        },
	        {
	          name: '作业系统',
	          icon: 'icon-zuoyexitong'
	        },
	        {
	          name: '单点登录',
	          icon: 'icon-icon-10'
	        },
	        {
	          name: '基础数据管理',
	          icon: 'icon-jichushujuguanli'
	        },
	        {
	          name: '调度系统',
	          icon: 'icon-tiaoduxitong'
	        },
	        {
	          name: '系统管理',
	          icon: 'icon-xitongguanli'
	        },
	        {
	          name: '决策系统',
	          icon: 'icon-icon-07'
	        },
	        {
	          name: '生产作业系统',
	          icon: 'icon-shengchanzuoyexitong'
	        },
	        {
	          name: '单证结算',
	          icon: 'icon-danzhengjiesuan'
	        },
	        {
	          name: '调度指挥管理',
	          icon: 'icon-lunboxitong'
	        },
	        {
	          name: '右箭头',
	          icon: 'icon-youjiantou'
	        },
	        {
	          name: '智能闸口',
	          icon: 'icon-shouyelogo-21'
	        },
	        {
	          name: '大计量系统',
	          icon: 'icon-shouyelogo-20'
	        }
	      ],
	      menuArr: [],
	      flag_am: false,
	      // 查询表单
	      searchForm: {
	        menuName: '', // 菜单名称
	        state: '2' // 菜单状态
	      },
	      // 为table指定列的定义
	      columns: [
	        {
	          label: '菜单名称',
	          prop: 'menuName',
	          minWidth: '200px'
	        },
	        {
	          label: '排序',
	          prop: 'sortNum',
	          width: '80px',
	          sortable: true
	        },
	        {
	          label: '请求地址',
	          prop: 'url',
	          minWidth: '150px'
	        },
	        {
	          label: '打开方式',
	          type: 'template',
	          template: 'templateO',
	          width: '100px'
	        },
	        {
	          label: '所属系统',
	          prop: 'systemName',
	          width: '150px'
	        },
	        {
	          label: '可见',
	          // 定义模板列
	          type: 'template',
	          // 设置模板名称
	          template: 'visibleT',
	          width: '100px'
	        },
	        {
	          label: '权限标识',
	          prop: 'menuCode',
	          width: '200px'
	        },
	        {
	          label: '菜单类型',
	          // 定义模板列
	          type: 'template',
	          // 设置模板名称
	          template: 'stateT',
	          width: '100px'
	        },
	        {
	          label: '操作',
	          type: 'template',
	          template: 'operation',
	          minWidth: '300px',
	          fixed: 'right'
	        }
	      ],
	      // 添加菜单
	      addFform: {
	        parentId: '', // 上级菜单
	        menuName: '', // 菜单名称
	        sortNum: 0, // 排序
	        url: '', // 请求地址
	        // systemCode: "", //所属系统
	        menuType: '01', // 类型
	        visible: '0', // 菜单状态
	        menuCode: '', // 权限标识
        systemCode: '014',
	        icon: '', // 图标
	        openType: '', // 打开方式
	        systemType: '0', // 系统类型
	        appImg: ''// app图片地址
	      },
	      editForm: {
	        parentId: '', // 上级菜单
	        menuName: '', // 菜单名称
	        sortNum: 0, // 排序
	        url: '', // 请求地址
	        systemCode: '', // 所属系统
	        menuType: '01', // 类型
	        visible: '0', // 菜单状态
	        menuCode: '', // 权限标识
	        icon: '', // 图标
	        openType: '', // 打开方式
	        systemType: '0', // 系统类型
	        appImg: ''// app图片地址
	      },
	      // 添加按钮
	      btnForm: {
	        parentMenuId: '', // 上级菜单id
	        resourceName: '', // 按钮名称
	        resourceCode: '', // 权限标识
	        sortNum: 0, // 排序
	        visible: '0' // 菜单状态
	      },
	      systemCode: '',
	      // 编辑按钮
	      editBtnForm: {
	        id: '',
	        parentMenuId: '', // 上级菜单id
	        resourceName: '', // 按钮名称
	        resourceCode: '', // 权限标识
	        sortNum: 0, // 排序
	        visible: '0' // 菜单状态
	      },
	      // 父级菜单验证
	      addFformRules: {
	        menuName: [
	          {
	            required: true,
	            message: '请输入菜单名称',
	            trigger: 'blur'
	          },
	          {
	            min: 1,
	            max: 10,
	            message: '长度在 1 到 10 个字符',
	            trigger: 'blur'
	          }
	        ],
	        sortNum: [
	          {
	            required: true,
	            message: '请输入排序',
	            trigger: 'blur'
	          }
	        ],
	        url: [
	          {
	            required: true,
	            message: '请输入地址',
	            trigger: 'blur'
	          }
	        ],
	        menuType: [
	          {
	            required: true,
	            message: '请选择菜单类型',
	            trigger: 'change'
	          }
	        ],
	        visible: [
	          {
	            required: true,
	            message: '请选择可见',
	            trigger: 'change'
	          }
	        ],
	        systemType: [
	          {
	            required: true,
	            message: '请选择系统类型',
	            trigger: 'change'
	          }
	        ],
	        menuCode: [
	          {
	            required: true,
	            message: '请输入权限标识',
	            trigger: 'blur'
	          }
	        ],
	        systemCode: [
	          {
	            required: true,
	            message: '请选择所属系统',
	            trigger: 'change'
	          }
	        ],
	        parentId: [
	          {
	            required: true,
	            message: '请选择上级菜单',
	            trigger: 'change'
	          }
	        ],
	        openType: [
	          {
	            required: true,
	            message: '请选择打开方式',
	            trigger: 'change'
	          }
	        ]
	      },

	      // 按钮验证
	      addBtnRules: {
	        parentMenuId: [
	          {
	            required: true,
	            message: '请选择上级菜单',
	            trigger: 'change'
	          }
	        ],
	        resourceName: [
	          {
	            required: true,
	            message: '请输入资源名称',
	            trigger: 'blur'
	          }
	        ],
	        visible: [
	          {
	            required: true,
	            message: '请输入资源状态',
	            trigger: 'blur'
	          }
	        ],
	        sortNum: [
	          {
	            required: true,
	            message: '请输入显示顺序',
	            trigger: 'blur'
	          }
	        ],
	        resourceCode: [
	          {
	            required: true,
	            message: '请输入权限标识',
	            trigger: 'blur'
	          }
	        ]
	      },
	      menuFlag: 'moren',
	      nowData: {},
	      // 表格
	      tableData: [],
	      // 编辑抽屉数据
	      drawer: false,
	      // 抽屉父级添加菜单
	      addFormDrawer: false,
	      // 按钮抽屉
	      btnDrawer: false,
	      // 编辑按钮抽屉
	      editBtnDrawer: false,
	      // 抽屉方向
	      direction: 'rtl',

	      // 菜单权限树形数据
	      rightsList: [],
	      // 树形控件的绑定对象
	      treeProps: {
	        children: 'children',
	        label: 'label'
	      },
	      flagMenu: true, // 判断编辑目录是否有children
	      flagCatalogue: true,
	      // 默认选中的节点数据
	      defkey: [],
	      flagAddBtn: false, // 是否选择了按钮
	      addBtnId: '', // 父id
	      parentName: '', // 没有父就用当前元素
	      // curHeight: null
	      isShowSort: false, // 配置列弹窗是否隐藏
	      showColumns: [], // 弹窗展示列
	      drawerColumn: false,
	      ruleFormColumn: {},
	      rulesColumn: {
	        columnLable: [{ required: true, message: '请填写中文列名', trigger: 'blur' }],
	        columnNameEn: [{ required: true, message: '请填写英文列名', trigger: 'blur' }],
	        columnSortNum: [{ required: true, message: '请填写列名排序号', trigger: 'blur' }]
	        // width:[
	        //   { required: true, message: '请填写列名', trigger: 'blur' }
	        // ],
	        // checked:[
	        //   { required: true, message: '请填写列名', trigger: 'change' }
	        // ],
	        // radio:[
	        //   { required: true, message: '请填写列名', trigger: 'change' }
	        // ]
	      },
	      hiddenValue: '',
	      typeColumn: 0, // 0 新建列  1 编辑列
	      menuColumnId: '', // 配置列菜单id
	      showColumnName: '',
	      columnTableData: [],
	      // tableHeightColumn:this.$store.state.tableHeight,
	      tableHeightColumn: window.innerHeight - 109,
	      // queryallColumn:{
	      //   totalNum: 10,
	      //   startpage: 1,
	      //   pagesize: 15
	      // },
	      queryallColumn: false,
	      clickColumn: '',
	      loadingColumn: false,
	      columnsList: [
	        {
	          label: '中文列名',
	          prop: 'columnLable'
	        },
	        {
	          label: '英文列名',
	          prop: 'columnNameEn'
	        },
	        {
	          label: '列宽度',
	          prop: 'columnWidth',
	          render: (h, params) => {
	            return h('div', {
	              domProps: {
	                innerHTML: params.row.columnWidth + 'px'
	              }
	            })
	          }
	        },
	        {
	          label: '是否显示',
	          prop: 'columnHide',
	          render: (h, params) => {
	            const columnHide = params.row.columnHide == '0' ? '显示' : params.row.columnHide == '1' ? '不显示' : ''
	            return h('div', {
	              domProps: {
	                innerHTML: columnHide
	              }
	            })
	          }
	        },
	        {
	          label: '是否排序',
	          prop: 'columnSort',
	          render: (h, params) => {
	            const columnSort = params.row.columnSort == '0' ? '不排序' : params.row.columnSort == '1' ? '排序' : ''
	            return h('div', {
	              domProps: {
	                innerHTML: columnSort
	              }
	            })
	          }
	        },
	        {
	          label: '列名排序号',
	          prop: 'columnSortNum'
	        }
	        // {
	        //   label: '创建人',
	        //   prop: 'createName',
	        // },
	        // {
	        //   label: '创建时间',
	        //   prop: 'createTime',
	        // },
	        // {
	        //   label: '更新人',
	        //   prop: 'updateName',
	        // },
	        // {
	        //   label: '更新时间',
	        //   prop: 'updateTime',
	        // },
	      ],
	      radioDisabled: false,
	      widthOptions: [
	        {
	          label: 50,
	          value: 50
	        },
	        {
	          label: 100,
	          value: 100
	        },
	        {
	          label: 150,
	          value: 150
	        },
	        {
	          label: 200,
	          value: 200
	        }
	      ]
	    }
	  },

	  created() {
	    try {
	      this.$refs['table'].store.states.lazyTreeNodeMap = {}
	    } catch (e) {}
	    // listDept(this.tableData).then(response => {
	    //   this.deptList = response.data
	    //   this.tableList = this.mapChildren(this.deptList)
	    // })
	  },
	  mounted() {
	    const that = this
	    that.$nextTick(() => {
	      const heightStyle = that.$refs.tableCot.offsetHeight - 40
	      that.Height = heightStyle
	    })
	    window.addEventListener(
	      'resize',
	      () => {
	        return (() => {
	          if (that.$refs.tableCot) {
	            const heightStyle = that.$refs.tableCot.offsetHeight - 40
	            that.Height = heightStyle
	          }
	        })()
	      },
	      false
	    )
	  },
	  async activated() {
	    // var menuArr = []
	    // var menuId = ""
	    // if (localStorage.getItem("menuArr")) {
	    // 	menuArr = JSON.parse(localStorage.getItem("menuArr"))
	    // }
	    // menuArr.map(item => {
	    // 	item.children.map(v => {
	    // 		if (window.location.href.includes(v.url)) {
	    // 			menuId = v.id
	    // 		}
	    // 	})
	    // })
    //
	    // if (menuId) {
	    // 	this.menuArr = []
	    // 	await this.$http
	    // 			.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
	    // 			.then(res => {
	    // 				res.data.data.map(item => {
	    // 					this.menuArr.push(item.RESOURCENAME)
	    // 				})
	    // 			})
	    // 			.catch(error => {})
	    // }
	    // if (this.$store.state.app.searchResouce == "menu") {
	    // 	this.searchForm = {
	    // 		menuName: "", //菜单名称
	    // 		state: "2", //菜单状态
	    // 	}
	    // 	this.getListproject()
	    // 	this.getMenuList()
	    // }
    // this.getListproject()
    this.getMenuList()
	  },
	  computed: {
	    tableHeight() {
	      return this.$store.state.tableHeight
	    }
	  },
	  methods: {
	    /**
			 * @description: 获取行数据
			 * @param {*} val
			 * @return {*}
			 */
	    getRowData(val) {
	      this.rowData = val
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:   列表校验
			 * @param {*}
			 * @return {*}
			 */
	    submitForm(formName) {
	      this.$refs[formName].validate(valid => {
	        if (valid) {
	          if (this.typeColumn == 0) {
	            const params = {
	              menuId: this.menuColumnId, // 菜单ID
	              columnLable: this.ruleFormColumn.columnLable, // 列名(中文)
	              columnNameEn: this.ruleFormColumn.columnNameEn, // 列名(英文)
	              columnWidth: this.ruleFormColumn.columnWidth, // 列宽;列宽度，数值区间：50px,100px,150px,200px
	              columnHide: this.ruleFormColumn.columnHide, // 是否显示;字典值：0-显示，1-不显示
	              columnSort: this.ruleFormColumn.columnSort, // 是否排序;字典值：0-不排序，1-排序
	              columnSortNum: this.ruleFormColumn.columnSortNum // 列名排序号
	            }
	            this.$http
	              .post(`/${this.$ServiceName}/api/external/sysmenu/${this.$version}/datagri/insert`, params)
	              .then(res => {
	                console.log(res)
	                if (res.data.success) {
	                  this.$message.success('新建列成功')
	                  this.drawerColumn = false
	                  this.getColumnData()
	                }
	              })
	              .catch(err => {
	                console.log(err)
	              })
	          } else if (this.typeColumn == 1) {
	            // let params = {
	            //     menuId:this.menuColumnId,	                            //菜单ID
	            //     columnLable:this.ruleFormColumn.columnLable,	              //列名(中文)
	            //     columnNameEn:this.ruleFormColumn.columnNameEn,	            //列名(英文)
	            //     columnWidth:this.ruleFormColumn.columnWidth,	              // 列宽;列宽度，数值区间：50px,100px,150px,200px
	            //     columnHide:this.ruleFormColumn.columnHide,	  // 是否显示;字典值：0-显示，1-不显示
	            //     columnSort:this.ruleFormColumn.columnSort,	    // 是否排序;字典值：0-不排序，1-排序
	            //     columnSortNum:this.ruleFormColumn.columnSortNum,	    // 列名排序号
	            // }
	            this.$http
	              .put(`/${this.$ServiceName}/api/external/sysmenu/${this.$version}/datagri/updatebyid`, this.ruleFormColumn)
	              .then(res => {
	                console.log(res)
	                if (res.data.success) {
	                  this.$message.success('更新列成功')
	                  this.drawerColumn = false
	                  this.getColumnData()
	                }
	              })
	              .catch(err => {
	                console.log(err)
	              })
	          }
	        } else {
	          return false
	        }
	      })
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:   多选框
			 * @param {*}
			 * @return {*}
			 */
	    checkedChange(val) {
	      if (val == '0') {
	        this.ruleFormColumn.columnHide = '1'
	      } else {
	        this.ruleFormColumn.columnHide = '0'
	      }
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:   单选框
			 * @param {*}
			 * @return {*}
			 */
	    radioChange(val) {
	      if (this.radioDisabled) {
	        return
	      }
	      if (val == '0') {
	        this.ruleFormColumn.columnSort = '1'
	      } else {
	        this.ruleFormColumn.columnSort = '0'
	      }
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:  新建列
			 * @param {*}
			 * @return {*}
			 */
	    getAddColumn() {
	      this.typeColumn = 0
	      this.$set(this.ruleFormColumn, 'columnLable', '')
	      this.$set(this.ruleFormColumn, 'columnNameEn', '')
	      this.$set(this.ruleFormColumn, 'columnWidth', 100)
	      this.$set(this.ruleFormColumn, 'columnHide', '0')
	      this.$set(this.ruleFormColumn, 'columnSort', '0')
	      this.$set(this.ruleFormColumn, 'columnSortNum', '')
	      this.drawerColumn = true

	      // 判断是否存在 排序列
	      this.radioDisabled = false
	      if (this.columnTableData.length != 0) {
	        this.columnTableData.map((item, index) => {
	          if (item.columnSort == '1') {
	            this.radioDisabled = true
	          }
	        })
	      }
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:  编辑列
			 * @param {*}
			 * @return {*}
			 */
	    getEditColumn() {
	      if (this.clickColumn) {
	        // 判断是否存在 排序列
	        this.radioDisabled = false
	        if (this.columnTableData.length != 0) {
	          this.columnTableData.map((item, index) => {
	            if (item.columnSort == '1') {
	              this.radioDisabled = true
	            }
	          })
	        }
	        if (this.clickColumn.columnSort == '1') {
	          this.radioDisabled = false
	        }

	        this.ruleFormColumn = {}
	        this.$http
	          .get(`/${this.$ServiceName}/api/external/sysmenu/${this.$version}/datagri/getdatagribyid?id=${this.clickColumn.id}`)
	          .then(res => {
	            console.log(res)
	            this.ruleFormColumn = res.data.data
	          })
	          .catch(err => {
	            console.log(err)
	          })
	        this.typeColumn = 1
	        this.drawerColumn = true
	      } else {
	        this.$message.warning('请选择一条数据，再进行编辑操作')
	      }
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:  删除列
			 * @param {*}
			 * @return {*}
			 */
	    getDeleteColumn() {
	      if (this.clickColumn) {
	        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        })
	          .then(() => {
	            const params = {
	              id: this.clickColumn.id
	            }
	            this.$http
	              .delete(`/${this.$ServiceName}/api/external/sysmenu/${this.$version}/datagri/deletebyid`, {
	                params: params
	              })
	              .then(res => {
	                console.log(res)
	                if (res.data.success) {
	                  if (res.data.success) {
	                    this.$message.success('删除列成功')
	                    this.getColumnData()
	                  }
	                }
	              })
	              .catch(err => {
	                console.log(err)
	              })
	          })
	          .catch(() => {})
	      } else {
	        this.$message.warning('请选择一条数据，再进行删除操作')
	      }
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:   获取配置列数据
			 * @param {*}
			 * @return {*}
			 */
	    sortHandleClick(row) {
	      this.menuColumnId = row.id
	      this.showColumnName = row.menuName
	      this.getColumnData()
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:
			 * @param {*}
			 * @return {*}
			 */
	    getColumnData() {
	      this.clickColumn = ''
	      this.loadingColumn = true
	      this.$http
	        .get(
	          // `/${this.$ServiceName}/api/external/sysmenu/${this.$version}/datagri/queryall?startpage=${this.queryallColumn.startpage}&pagesize=${this.queryallColumn.pagesize}`
	          `/${this.$ServiceName}/api/external/sysmenu/${this.$version}/datagri/queryall?startpage=${1}&pagesize=${100}&menuId=${
	            this.menuColumnId
	          }`
	        )
	        .then(res => {
	          console.log(res)
	          this.columnTableData = res.data.data.pages
	          this.loadingColumn = false
	          this.queryallColumn.totalNum = res.data.data.totalNum
	        })
	        .catch(err => {
	          console.log(err)
	        })
	      this.isShowSort = true
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description: 配置列表格 单击
			 * @param {*}
			 * @return {*}
			 */
	    getSelectListTable(row) {
	      console.log(row)
	      this.clickColumn = row
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description: 配置列表格 分页
			 * @param {*}
			 * @return {*}
			 */
	    sizeChangeColumn(val) {
	      // this.queryall.startpage = 1
	      this.queryallColumn.pagesize = val
	      this.getColumnData()
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description: 配置列表格 分页
			 * @param {*}
			 * @return {*}
			 */
	    pageChangeColumn(val) {
	      this.queryallColumn.startpage = val
	      this.getColumnData()
	    },
	    /**
			 * @Author: zhangyongbing
			 * @description:   配置列保存按钮事件
			 * @param {*} value
			 * @return {*}
			 */
	    submitHandleClickSort(value) {
	      this.isShowSort = false
	      // this.columns = value
	      // this.getTableListData()
	    },
	    // 获取菜单数据列表
	    async getMenuList(id) {
	      const res = await this.$http.get(`/${this.$ServiceName}/api/external/sysmenu/listmenu?state=2`)
	      if (res.data.code != '0000') {
	        return this.$message.error(res.data.msg)
	      }
	      console.log(res)
	      this.tableData = res.data.data
	      this.tableData = this.mapChildren(this.tableData)
	      if (id) {
	        this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, id, this.lazyTreeNodeMap[id])
	      }
	    },
	    /** 递归树结构*/
	    mapChildren(arr) {
	      const newArr = []
	      arr.forEach(item => {
	        const obj = item
	        if (item.children) {
	          if (!item.children.length) {
	            obj.hasChildren = false
	          } else {
	            // 保存对象children
	            this.lazyTreeNodeMap[item.id] = this.mapChildren(item.children)
	            obj.hasChildren = true
	          }
	          delete obj.children
	        }
	        newArr.push(obj)
	      })
	      return newArr
	    },
	    /* el-table懒加载调用方法，返回对象id下的children */
	    getChildren(tree, treeNode, resolve) {
	      setTimeout(() => {
	        resolve(this.lazyTreeNodeMap[tree.id] || [])
	      }, 1000)
	    },

	    // 获取所属系统
	    // async getListproject() {
	    // 	const res = await this.$http.get(`/${this.$ServiceName}/api/external/public/listproject`)
	    // 	// // console.log(res.data.data);
	    // 	if (res.data.code != "0000") {
	    // 		return this.$message.error(res.data.msg)
	    // 	}
	    // 	this.listproject = res.data.data
	    // },

	    // 根据系统与菜单类型 查询上级菜单
	    // async getMune(menutype, systemcode) {
	    //   const res = await this.$http.get(
	    //     `/${this.$ServiceName}/api/external/sysmenu/listmenubytype?menutype=${menutype}&systemcode=${systemcode}`
	    //   )
	    //   // // console.log(res)
	    //   if (res.data.code != '0000') {
	    //     return this.$message.error(res.data.msg)
	    //   }

	    //   // if (res.data.data.length == 0) {
	    //   //   return (this.parentMenu = [{ menuId: '0', menuName: this.codeName }])
	    //   // }
	    //   // // console.log(res.data.data)
	    //   this.parentMenu = res.data.data
	    // },
	    // 添加菜单联动获取上级菜单
	    async getAddMenu(menutype, systemcode) {
	      const res = await this.$http.get(
	        `/${this.$ServiceName}/api/external/sysmenu/listmenubytype?menutype=${menutype}&systemcode=${systemcode}`
	      )
	      if (res.data.code != '0000') {
	        return this.$message.error('获取上级菜单失败' + res.data.msg)
	      }

	      const nullArr = res.data.data
	      if (nullArr == '') {
	        // console.log('空数组')
	        this.addFform.parentId = ''
	        this.parentMenu = [
	          {
	            menuId: systemcode,
	            menuName: this.parentName
	          }
	          // { menuId: this.systemcode, menuName: this.parentName }
	        ]
	        this.addFform.parentId = systemcode
	      } else {
	        this.parentMenu = res.data.data
	        // // console.log(this.parentMenu)
	        this.addFform.parentId = res.data.data[0].menuId
	      }
	      this.oldValA = JSON.parse(JSON.stringify(this.addFform))

	      // this.addFform.parentId = res.data.data[0].menuId
	    },
	    // 编辑菜单联动获取上级菜单
	    async getEditMenu(menutype, systemcode, parentId, flag) {
	      const res = await this.$http.get(
	        `/${this.$ServiceName}/api/external/sysmenu/listmenubytype?menutype=${menutype}&systemcode=${systemcode}`
	      )
	      if (res.data.code != '0000') {
	        return this.$message.error('获取上级菜单失败' + res.data.msg)
	      }
	      if (res.data.data.length < 1) {
	        // 如果
	        // let newSystemName = ''
	        // 循环获取系统名
	        const newSystemName = this.listproject
	          .filter(item => item.systemCode == this.editForm.systemCode)
	          .map(item => {
	            const _newSystemName = {
	              menuId: '0',
	              menuName: item.systemName
	            }
	            return _newSystemName
	          })
	        this.parentMenu = newSystemName
	        this.editForm.parentId = '0'
	        return ''
	      }
	      // // console.log(res)
	      if (flag == true) {
	        this.editForm.parentId = parentId
	      } else {
	        this.editForm.parentId = res.data.data[0].menuId
	      }
	      this.parentMenu = res.data.data
	    },
	    addFormImg() {
	      if (this.addFform.systemType == '1') {
	        this.flag_am = true
	      } else {
	        this.flag_am = false
	      }
	    },
	    editFormImg() {
	      if (this.editForm.systemType == '1') {
	        this.flag_am = true
	      } else {
	        this.flag_am = false
	      }
	    },
	    // 查询菜单数据列表
	    async searchMenuForm() {
	      // // console.log(this.searchForm)
	      if (this.searchForm.state == '') {
	        this.getMenuList()
	      } else {
	        const res = await this.$http.get(`/${this.$ServiceName}/api/external/sysmenu/listmenu`, {
	          params: this.searchForm
	        })
	        this.tableData = res.data.data
	        this.tableData = this.mapChildren(this.tableData)
	        const id = this.openId
	        if (id) {
	          this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, id, this.lazyTreeNodeMap[id])
	        }
	      }
	    },

	    // 获取上级菜单
	    getParentMenu() {
	      const menutype = '01'

	      const systemcode = this.addFform.systemCode
	    },

	    // 添加菜单
	    addMenu(data) {
	      console.log(data.menuType)
	      if (data.menuType === '01') {
	        // this.addFform.systemCode = data.systemCode
	        // this.systemCode = data.id
	        this.addFform.parentId = data.id
	        this.nowData = data
	        this.menuFlag = 'moren'
	      } else {
	        this.addFform.parentId = '0'
	      }
	      this.addBtnId = data.id // 添加父id
	      this.addFormDrawer = true
	      this.getParentMenu()
	      // this.getListproject()
	      this.listproject.forEach(n => {
	        if (n.systemName === data.systemName) {
	          console.log(n.systemCode)
	          this.addFform.systemCode = n.systemCode
	          this.nowData.systemCode = n.systemCode
	        }
	      })
	      this.oldValA = JSON.parse(JSON.stringify(this.addFform))

	      // console.log(this.nowData)
	      // if (data.menuType === "01") {
	      // 	this.getAddMenu(data.menuType, this.nowData.systemCode)
	      // }
	      // console.log(data, this.menuFlag); //菜单数据id
	    },
	    // 菜单类型事件
	    changeMenuType(value) {
	      // console.log(value)
	      if (value == '03') {
	        // // console.log(true)
	        this.flagAddBtn = true
	      } else {
	        this.flagAddBtn = false
	      }
	      // console.log(this.flagAddBtn)
	      this.getParentMenu()
	    },

	    // 所属系统类型事件
	    changeSystemCode() {
	      this.menuFlag = '0'
	      const code = this.addFform.systemCode
	      const data = this.listproject
	      data.forEach(item => {
	        if (item.systemCode == code) {
	          this.codeName = item.systemName
	        }
	      })
	      this.addFform.parentId = ''
	      this.getParentMenu()
	    },
	    // 选择所属系统
	    changeAddSystemCode(val) {
	      this.listproject.forEach(item => {
	        if (item.systemCode == val) {
	          this.parentName = item.systemName
	        }
	      })

	      const menuType = this.addFform.menuType
	      const sysCode = this.addFform.systemCode

	      this.getAddMenu(menuType, sysCode)
	    },
	    // 编辑上级菜单联动
	    changeEditSystemCode() {
	      const menuType = '01'
	      const sysCode = this.editForm.systemCode
	      this.getEditMenu(menuType, sysCode, 'none', false)
	    },
	    // 添加按钮上级菜单联动
	    // changeBtnSystemCode() {
	    //   let menuType = this.btnForm.menuType
	    //   // // console.log(menuType)

	    //   let systemCode = this.btnForm.systemCode
	    //   // // console.log(systemCode)
	    //   this.getEditMenu(menuType, systemCode,'none',false)
	    // },
	    // 编辑菜单
	    async handleEdit(data, id) {
	      this.openId = data.parentId
	      // 判断data是否有children
	      if (data.children) {
	        this.flagMenu = false
	      } else {
	        this.flagMenu = true
	      }
	      if (data.menuType == '02') {
	        this.flagCatalogue = true
	      } else {
	        this.flagCatalogue = false
	      }
	      // 获取编辑列表信息
	      const res = await this.$http.get(`/${this.$ServiceName}/api/external/sysmenu/getmenubyid?id=${id}`)
	      console.log(res)
	      if (res.data.code !== '0000') {
	        return this.$message.error('获取菜单列表失败！')
	      }
	      this.editForm = res.data.data
	      if (this.editForm.systemType == '1') {
	        this.flag_am = true
	      } else {
	        this.flag_am = false
	      }
	      // 设置上级菜单列表
	      // this.getMune('01', this.editForm.systemCode)
	      // //上级菜单为0 显示所属系统名
	      if (this.editForm.parentId == '0') {
	        // // console.log("默认值0")

	        // // console.log(this.editForm.systemCode)
	        let newSystemName = ''
	        // 循环获取系统名
	        this.listproject.forEach(item => {
	          if (item.systemCode == this.editForm.systemCode) {
	            // // console.log(item.systemName)
	            newSystemName = item.systemName
	          }
	        })
	        this.parentMenu = [
	          {
	            menuId: '0',
	            menuName: newSystemName
	          }
	        ]
	      } else {
	        this.getEditMenu('01', this.editForm.systemCode, data.parentId, true)
	      }
	      this.oldValB = JSON.parse(JSON.stringify(this.editForm))
	      this.drawer = true
	    },
	    // 按钮编辑
	    handleBtnEdit(data) {
	      this.openId = data.parentId
	      this.editBtnForm.id = data.id
	      this.editBtnForm.parentMenuId = data.parentId
	      this.editBtnForm.resourceName = data.menuName
	      this.editBtnForm.resourceCode = data.menuCode
	      this.editBtnForm.sortNum = data.sortNum
	      this.editForm.visible = data.visible
	      // // console.log(this.editBtnForm)
	      this.editBtnDrawer = true
	      this.$nextTick(() => {
	        // this.$refs.btnFormRef.resetFields()
	        this.oldValD = JSON.parse(JSON.stringify(this.editBtnDrawer))
	      })
	    },
	    // 按钮编辑保存
	    btnEditFormSubmit() {
	      this.$refs.btnFormRef.validate(async valid => {
	        // // console.log(valid)
	        if (valid) {
	          const res = await this.$http.put(`/${this.$ServiceName}/api/external/sysmenubtn/updatebtn`, this.editBtnForm)
	          if (res.data.code != '0000') {
	            return this.$message.error(res.data.msg)
	          }
	          this.$message.success('修改按钮成功')
	          this.searchMenuForm()
	          this.editBtnDrawer = false
	        } else {
	          return false
	        }
	      })
	    },
	    // 根据id删除按钮
	    async deleteBtnById(id) {
	      const res = await this.$http.delete(`/${this.$ServiceName}/api/external/sysmenubtn/deletebtn?btnid=${id}`)
	      if (res.data.code != '0000') {
	        this.$message.error(res.data.msg)
	      } else {
	        this.$message.success('删除按钮成功！')
	        this.searchMenuForm()
	      }
	    },

	    // 编辑菜单提交保存
	    editFormSubmit() {
	      this.$refs.form.validate(async valid => {
	        if (valid) {
	          if (this.editForm.parentId == '') {
	            this.editForm.parentId = '0'
	            const res = await this.$http.put(`/${this.$ServiceName}/api/external/sysmenu/update`, this.editForm)

	            if (res.data.code != '0000') {
	              return this.$message.error(res.data.msg)
	            }
	            this.$message.success('更新成功！')
	            this.getMenuList()
	          } else {
	            const res = await this.$http.put(`/${this.$ServiceName}/api/external/sysmenu/update`, this.editForm)

	            if (res.data.code != '0000') {
	              return this.$message.error(res.data.msg)
	            }
	            this.$message.success('更新成功！')
	            this.getMenuList(this.openId)
	            this.drawer = false
	          }
	        }
	      })
	    },

	    // 根据id删除菜单
	    async deleteById(id) {
	      const res = await this.$http.delete(`/${this.$ServiceName}/api/external/sysmenu/deletebyid?id=${id}`)
	      if (res.data.code != '0000') {
	        this.$message.error(res.data.msg)
	      } else {
	        this.$message.success('删除成功！')
	        this.searchMenuForm()
	      }
	    },

	    cancel() {
	      return this.$message.info('已取消删除')
	    },

	    // 添加父级菜单
	    submitFform() {
	      let data = {}
	      if (this.menuFlag === 'moren') {
	        data = {
	          icon: this.addFform.icon,
	          menuCode: this.addFform.menuCode,
	          menuName: this.addFform.menuName,
	          menuType: this.addFform.menuType,
	          openType: this.addFform.openType,
	          systemType: '0',
	          parentId: this.nowData.id,
	          sortNum: this.addFform.sortNum,
	          systemCode: this.nowData.systemCode,
	          url: this.addFform.url,
	          visible: this.addFform.visible,
	          appImg: this.addFform.appImg
	        }
	      } else if (this.menuFlag === '0') {
	        data = {
	          icon: this.addFform.icon,
	          menuCode: this.addFform.menuCode,
	          menuName: this.addFform.menuName,
	          menuType: this.addFform.menuType,
	          systemType: '0',
	          openType: this.addFform.openType,
	          parentId: this.addFform.parentId,
	          sortNum: this.addFform.sortNum,
	          systemCode: this.addFform.systemCode,
	          url: this.addFform.url,
	          visible: this.addFform.visible,
	          appImg: this.addFform.appImg
	        }
	      }
	      data = {
	        icon: this.addFform.icon,
	        menuCode: this.addFform.menuCode,
	        menuName: this.addFform.menuName,
	        menuType: this.addFform.menuType,
	        systemType: this.addFform.systemType,
	        openType: this.addFform.openType,
	        parentId: this.addFform.parentId,
	        sortNum: this.addFform.sortNum,
	        systemCode: this.addFform.systemCode,
	        url: this.addFform.url,
	        visible: this.addFform.visible,
	        appImg: this.addFform.appImg
	      }

	      this.$refs['ruleAddFform'].validate(async valid => {
	        if (valid) {
	          const res = await this.$http.post(`/${this.$ServiceName}/api/external/sysmenu/add`, data)
	          if (res.data.code != '0000') {
	            return this.$message.error(res.data.msg)
	          }
	          this.$message.success('添加成功！')
	          this.getMenuList(data.parentId)
	          this.addFormDrawer = false
	        } else {
	          return false
	        }
	      })
	    },
	    // 重置父级菜单
	    resetFform() {
	      this.$refs['ruleAddFform'].resetFields()
	    },
	    handleRoleGroupClick(data) {
	      this.roleGrounpKey == ''
	      console.log(data, 'data')
	      this.roleGrounpVisible = true
	      this.roleGrounpId = data.id
	      this.menuTypeData = data.menuType
	      this.loadRoleGrounpData()
	    },
	    async loadRoleGrounpData() {
	      if (this.menuTypeData == '03') {
	        var res = await this.$http.get(
	          `/${this.$ServiceName}/api/external/sysmenubtn/listrolenamebybtn?startpage=${this.roleGrounpPagination.currentPage}&rolename=${this.roleGrounpKey}&pagesize=${this.roleGrounpPagination.pageSize}&id=${this.roleGrounpId}`
	        )
	      } else {
	        var res = await this.$http.get(
	          `/${this.$ServiceName}/api/external/sysmenu/selectrolebymenuid?startpage=${this.roleGrounpPagination.currentPage}&roleName=${this.roleGrounpKey}&pagesize=${this.roleGrounpPagination.pageSize}&menuId=${this.roleGrounpId}`
	        )
	      }
	      this.roleData = res.data.data.pages
	      this.roleGrounpPagination.pageSize = res.data.data.pageSize
	      this.roleGrounpPagination.currentPage = res.data.data.pageNum
	      this.roleGrounpPagination.total = res.data.data.totalNum
	    },
	    roleGrounpPaginationSizeChange(val) {
	      this.roleGrounpPagination.pageSize = val
	      this.loadRoleGrounpData()
	    },
	    roleGrounpPaginationCurrentChange(val) {
	      this.roleGrounpPagination.currentPage = val
	      this.loadRoleGrounpData()
	    },
	    searchRoleName() {
	      this.roleGrounpPagination.currentPage = 1
	      this.loadRoleGrounpData()
	    },
	    // 抽屉关闭提示
	    handleClose(done) {
	      let oldV = {}
	      let newV = {}
	      if (this.addFormDrawer) {
	        oldV = this.oldValA
	        newV = this.addFform
	        console.log('a')
	      }
	      if (this.drawer) {
	        oldV = this.oldValB
	        newV = this.editForm
	        console.log('b')
	      }
	      if (this.btnDrawer) {
	        oldV = this.oldValC
	        newV = this.btnForm
	        console.log('c')
	      }
	      if (this.editBtnDrawer) {
	        oldV = this.oldValD
	        newV = this.editBtnDrawer
	        console.log('d')
	      }
	      if (!Utils.compareData(oldV, newV)) {
	        this.$confirm('修改的数据未保存，是否关闭？')
	          .then(_ => {
	            console.log('e')
	            done()
	            this.roleGrounpPagination.currentPage = 1
	          })
	          .catch(_ => {})
	      } else {
	        console.log('f')
	        done()
	        this.roleGrounpPagination.currentPage = 1
	      }
	    },
	    handeleBtnClick(data) {
	      this.openId = data.id
	      const parentMenuId = data.id // 获取父id
	      this.btnForm.parentMenuId = parentMenuId
	      this.btnDrawer = true
	      this.$nextTick(() => {
	        this.$refs.btnFormRef.resetFields()
	        this.oldValC = JSON.parse(JSON.stringify(this.btnForm))
	      })
	    },
	    // 添加按钮保存form表单事件
	    btnFormSubmit() {
	      this.$refs.btnFormRef.validate(async valid => {
	        if (valid) {
	          const res = await this.$http.post(`/${this.$ServiceName}/api/external/sysmenubtn/addbtn`, this.btnForm)
	          if (res.data.code != '0000') {
	            return this.$message.error(res.data.msg)
	          }
	          this.$message.success('添加按钮成功')

	          this.searchMenuForm()
	        } else {
	          return false
	        }
	      })
	    },
	    // 按钮添加
	    addBtnSubmit() {
	      this.btnForm.parentMenuId = this.addBtnId
	      this.btnForm.resourceName = this.addFform.menuName
	      this.btnForm.resourceCode = this.addFform.menuCode
	      this.btnForm.sortNum = this.addFform.sortNum
	      this.btnForm.visible = this.addFform.visible
	      this.$refs['ruleAddFform'].validate(async valid => {
	        if (valid) {
	          const res = await this.$http.post(`/${this.$ServiceName}/api/external/sysmenubtn/addbtn`, this.btnForm)
	          if (res.data.code != '0000') {
	            return this.$message.error(res.data.msg)
	          }
	          this.$message.success('添加按钮成功')
	          this.searchMenuForm()
	        }
	      })
	    },
	    // 添加擦弹保存并新建
	    saveSubmit() {
	      let data = {}
	      if (this.menuFlag === 'moren') {
	        data = {
	          icon: this.addFform.icon,
	          menuCode: this.addFform.menuCode,
	          menuName: this.addFform.menuName,
	          menuType: this.addFform.menuType,
	          openType: this.addFform.openType,
	          parentId: this.nowData.id,
	          sortNum: this.addFform.sortNum,
	          systemCode: this.nowData.systemCode,
	          url: this.addFform.url,
	          visible: this.addFform.visible
	        }
	      } else if (this.menuFlag === '0') {
	        data = {
	          icon: this.addFform.icon,
	          menuCode: this.addFform.menuCode,
	          menuName: this.addFform.menuName,
	          menuType: this.addFform.menuType,
	          openType: this.addFform.openType,
	          parentId: this.addFform.parentId,
	          sortNum: this.addFform.sortNum,
	          systemCode: this.addFform.systemCode,
	          url: this.addFform.url,
	          visible: this.addFform.visible
	        }
	      }
	      data = {
	        icon: this.addFform.icon,
	        menuCode: this.addFform.menuCode,
	        menuName: this.addFform.menuName,
	        menuType: this.addFform.menuType,
	        openType: this.addFform.openType,
	        parentId: this.addFform.parentId,
	        sortNum: this.addFform.sortNum,
	        systemCode: this.addFform.systemCode,
        systemType: this.addFform.systemType,
	        url: this.addFform.url,
	        visible: this.addFform.visible
	      }
	      this.$refs['ruleAddFform'].validate(async valid => {
	        if (valid) {
	          const res = await this.$http.post(`/${this.$ServiceName}/api/external/sysmenu/add`, data)
	          if (res.data.code != '0000') {
	            return this.$message.error(res.data.msg)
	          }
	          this.$message.success('添加成功！')
	          this.getMenuList()
	          this.resetFform() // 初始化
	        } else {
	          return false
	        }
	      })
	    },

	    // 删除提示
	    async handleDelete(type, id, row) {
	      this.openId = row.parentId
	      const confirmRes = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	      }).catch(err => {})
	      if (confirmRes !== 'confirm') {
	        return this.$message.info('已经取消删除')
	      }
	      console.log('删除整体')
	      /**
				 * 03=按钮
				 *
				 */
	      if (type == '03') {
	        this.deleteBtnById(id)
	      } else {
	        this.deleteById(id)
	      }
	    }
	  }
	}
</script>
<style lang="less" scoped>
	//  @import '../../../assets/table';
	/deep/ .el-table th:last-child {
		border-left: none;
	}
	/deep/ .el-table th > .cell {
		font-family: PingFangSC-Semibold;
		font-size: 14px;
		color: #606266;
	}
	/deep/ .el-table .cell {
		white-space: nowrap;
	}
	/deep/ .el-table th {
		height: 41px !important;
	}

	/deep/ .el-table tr {
		height: 41px !important;
	}
	/deep/ .el-table th {
		border-left: 1px solid #ebeef5;
		border-right: none;
		// border-bottom: none !important;
	}

	/deep/ .el-table th:nth-child(1) {
		border-left: none;
	}
	/deep/ .el-table td {
		border-right: none;
	}
	// @media all and (max-width: 1920px) and (max-height: 1080px) {
	// 	/deep/ .zk-table__body-wrapper {
	// 		overflow: auto;
	// 		height: 100% !important;
	// 		max-height: 790px;
	// 	}
	// }

	// @media all and (max-width: 1680px) and (max-height: 1050px) {
	// 	/deep/ .zk-table__body-wrapper {
	// 		overflow: auto;
	// 		height: 100% !important;
	// 		max-height: 780px;
	// 	}
	// }
	// @media all and (max-width: 1600px) and (max-height: 900px) {
	// 	/deep/ .zk-table__body-wrapper {
	// 		overflow: auto;
	// 		height: 100% !important;
	// 		max-height: 700px;
	// 	}
	// }
	// @media all and (max-width: 1536px) and (max-height: 864px) {
	// 	/deep/ .zk-table__body-wrapper {
	// 		overflow: auto;
	// 		height: 100% !important;
	// 		max-height: 650px;
	// 	}
	// }
	// @media all and (min-height: 500px) and (max-height: 640px) {
	// 	/deep/ .zk-table__body-wrapper {
	// 		overflow: auto;
	// 		height: 100% !important;
	// 		max-height: 600px;
	// 	}
	// }
	// @media screen and (max-height: 500px) {
	// 	/deep/ .zk-table__body-wrapper {
	// 		overflow: auto;
	// 		height: 100% !important;
	// 		max-height: 400px;
	// 	}
	// }
	.container {
		height: 100%;

		// 查询表单start
		.search_form {
			background-color: #fff;
			color: #303133;
			border-radius: 4px;
			font-size: 14px;
			color: #606266;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 16px;

			/deep/.el-input {
				width: 150px;
			}

			.second_label {
				margin-left: 16px;
			}

			/deep/.el-button {
				margin-left: 16px;
			}
		}

		// 查询表单end

		//table tree
		// /deep/ .zk-table__body {
		// 	color: #606266;
		// }

		// /deep/ .zk-table__cell-inner {
		// 	padding: 0 6px;
		// }

		// /deep/ .zk-table__header-cell:last-child {
		// 	text-align: center;
		// }

		// //分页start
		// /deep/.el-pagination.is-background .btn-next,
		// /deep/ .el-pagination.is-background .btn-prev,
		// /deep/ .el-pagination.is-background .el-pager li {
		// 	background: #ffffff;
		// 	border: 1px solid #e1e4eb;
		// 	border-radius: 3px;
		// 	border-radius: 3px;
		// }

		// 分页end

		// table-tree树
		// /deep/ .zk-table {
		// 	font-size: 14px;
		// }

		// /deep/.zk-table__header-cell {
		// 	border-left: 1px solid #ebeef5;
		// 	background-color: #fff;
		// 	height: 40px;
		// 	font-size: 14px;
		// 	color: #606266;
		// }

		//tableend-样式

		.editBtn,
		.deleteBtn {
			color: #1684f6;
			border-color: transparent;
			background: transparent;
		}

		// 抽屉头部样式
		/deep/ .el-drawer__header {
			background-color: #f5f7fa;
			margin-bottom: 12px;
			padding: 16px;
			border-bottom: 1px solid gainsboro;
		}

		/deep/ .el-drawer__body {
			overflow-y: auto;
			padding-bottom: 50px;
		}

		//抽屉底部样式
		.demo-drawer__footer {
			text-align: right;
			padding-right: 1rem;
			border-top: 1px solid #c8cfde;
			background-color: #f5f7fa;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			line-height: 50px;
		}

		//分页
		// .card_pagination {
		// 	text-align: right;
		// 	padding: 10px 20px;
		// 	background: #ffffff;
		// }

		// /deep/.el-pagination.is-background .btn-next,
		// /deep/ .el-pagination.is-background .btn-prev,
		// /deep/ .el-pagination.is-background .el-pager li {
		// 	background: #ffffff;
		// 	border: 1px solid #e1e4eb;
		// 	border-radius: 3px;
		// 	border-radius: 3px;
		// }
	}

	.btn /deep/ .el-button--mini,
	.el-button--mini.is-round {
		padding: 7px 6px;
	}
	.box {
		border: 1px solid #e1e4eb;
		border-radius: 4px 4px 0 0;
		border-top: none;
	}
	.search_input {
		padding: 0 20px 10px 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.el-input {
			width: 150px;
		}
	}
</style>
